<template>
	<view class="container container333526">
		<u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24">
			<u-form-item labelAlign="justify" class="diygw-col-24 diygw-uform-item" :required="true" label="申请人" prop="title">
				<view class="flex flex-sub padding-top-xs padding-bottom-xs align-center form_title_clz">
					<u-input :focus="formData.titleFocus" :disabled="formData.titleDisabled" placeholder="请输入申请人" v-model="form.title"></u-input>
				</view>
			</u-form-item>
			<u-form-item labelAlign="justify" class="diygw-col-24 diygw-uform-item" label="申请公司" prop="gongsi">
				<view class="flex flex-sub padding-top-xs padding-bottom-xs align-center form_gongsi_clz">
					<u-input :focus="formData.gongsiFocus" :disabled="formData.gongsiDisabled" placeholder="请输入申请公司" v-model="form.gongsi"></u-input>
				</view>
			</u-form-item>
			<u-form-item labelAlign="justify" class="diygw-col-24" label="入厂时间" prop="shenqingshijian">
				<u-input @click="formData.showShenqingshijian = true" class="form_shenqingshijian_clz" placeholder="请选择" v-model="form.shenqingshijian" type="select"></u-input>
				<u-picker :defaultTime="form.shenqingshijian" v-model="formData.showShenqingshijian" mode="time" :params="formData.paramsShenqingshijian" @confirm="changeFormShenqingshijian"></u-picker>
			</u-form-item>
			<u-form-item labelAlign="justify" class="diygw-col-24 diygw-uform-item" :required="true" label="拜访人" prop="baifangren">
				<view class="flex flex-sub padding-top-xs padding-bottom-xs align-center form_baifangren_clz">
					<u-input :focus="formData.baifangrenFocus" placeholder="请输入拜访人" v-model="form.baifangren"></u-input>
				</view>
			</u-form-item>
			<u-form-item labelAlign="justify" class="diygw-col-24 diygw-uform-item" :required="true" label="同行人数" prop="number">
				<view class="flex flex-sub padding-top-xs padding-bottom-xs align-center form_number_clz">
					<u-input :focus="formData.numberFocus" placeholder="请输入同行人数" v-model="form.number" type="number"></u-input>
				</view>
			</u-form-item>
			<u-form-item labelAlign="justify" class="diygw-col-24 diygw-uform-item" label="申请事由" prop="remark">
				<u-input maxlength="200" height="60px" class="form_remark_clz" placeholder="请输入申请事由" v-model="form.remark" type="textarea"></u-input>
			</u-form-item>
			<view class="flex flex-wrap diygw-col-24 flex-clz">
				<button @tap="navigateTo" data-type="page" data-url="/pages/records" class="diygw-col-8 btn-clz diygw-btn-default">申请记录</button>
				<button @click="submitForm" class="diygw-col-0 btn1-clz diygw-btn-default">提交</button>
			</view>
		</u-form>
		<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center right-bottom flex1-clz" @tap="navigateTo" data-type="logoutFunction">
			<text class="flex icon diygw-col-0 diy-icon-close"></text>
			<text class="diygw-col-0"> 退出登录 </text>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				dataNum: 1,
				data: {
					code: 200,
					msg: 'success',
					data: {
						id: 7,
						title: '测试2 ',
						gongsi: '申请公司',
						baifangren: 'sfasf',
						number: 1,
						shenqingshijian: '2024-12-25 11',
						remark: '',
						status: null,
						createTime: '2024-12-25 11:47:31',
						updateTime: '2024-12-25 11:47:31',
						deleteTime: null
					}
				},
				formRules: {
					title: [
						{
							trigger: ['change', 'blur'],
							required: true,
							message: '申请人不能为空'
						}
					],
					baifangren: [
						{
							trigger: ['change', 'blur'],
							required: true,
							message: '拜访人不能为空'
						}
					],
					number: [
						{
							type: 'number',
							trigger: ['change', 'blur'],
							required: true,
							message: '同行人数不能为空'
						}
					]
				},
				form: {
					title: '',
					gongsi: '',
					shenqingshijian: '',
					baifangren: '',
					number: undefined,
					remark: ''
				},
				formData: {
					titleDisabled: true,
					titleFocus: false,
					gongsiDisabled: true,
					gongsiFocus: false,
					paramsShenqingshijian: {
						year: true,
						month: true,
						day: true,
						hour: true,
						minute: false,
						second: false
					},
					showShenqingshijian: false,
					baifangrenFocus: false,
					numberFocus: false
				}
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		onReady() {
			this.$refs.formRef?.setRules(this.formRules);
		},
		methods: {
			async init() {
				await this.dataApi();
				await this.isloginFunction();
				await this.initResetform();
			},
			// 列表数据 API请求方法
			async dataApi(param) {
				let thiz = this;
				param = param || {};

				//如果请求要重置页面，请配置点击附加参数refresh=1  增加判断如输入框回调param不是对象
				if (param.refresh || typeof param != 'object') {
					this.dataNum = 1;
				}

				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = '/gc/shenqing/get';
				let http_data = {
					pageNum: this.dataNum,
					pageSize: 10,
					id: param.id || this.globalOption.id || '7'
				};
				let http_header = {};

				//不是修改，初始化用户信息
				if (!this.globalOption.id) {
					await this.initUserFunction({});
					return;
				}

				let data = await this.$http.post(http_url, http_data, http_header, 'json');

				let datarows = data.rows;
				if (http_data.pageNum == 1) {
					this.data = data;
				} else if (datarows) {
					let rows = this.data.rows.concat(datarows);
					data.rows = rows;
					this.data = data;
				}
				if (datarows && datarows.length > 0) {
					this.dataNum = this.dataNum + 1;
				}
				this.form = data.data;
			},

			// 初始化申请人信息 自定义方法
			async initUserFunction(param) {
				let thiz = this;
				this.form.title = this.userInfo.nickname;
				this.form.gongsi = this.userInfo.company;
			},

			// 判断用户是否登录 自定义方法
			async isloginFunction(param) {
				let thiz = this;
				if (!this.$session.getToken()) {
					//比如未登录，转身到其他页面等
					this.showToast('请先登录');
					this.navigateTo({
						type: 'page',
						url: 'login'
					});
					return;
				}
			},

			// 退出登录 自定义方法
			async logoutFunction(param) {
				let thiz = this;
				this.$session.clearUser();
				this.navigateTo({
					type: 'page',
					url: 'login'
				});
			},
			changeFormShenqingshijian(evt) {
				this.form.shenqingshijian = evt.year + '-' + evt.month + '-' + evt.day + ' ' + evt.hour;
			},
			initResetform() {
				this.initform = JSON.stringify(this.form);
				//如果想给表单默认初始值，其中row为某一行数据也可能是API返回的结果集，然后给到this.form
				//this.form = this.$tools.changeRowToForm(row,this.form)
			},
			resetForm() {
				this.form = JSON.parse(this.initform);
			},

			async submitForm(e) {
				this.$refs.formRef?.setRules(this.formRules);

				this.$nextTick(async () => {
					let valid = await this.$refs.formRef.validate();
					if (valid) {
						//保存数据
						let param = this.form;
						let header = {};
						let url = '/gc/shenqing/add';

						//如果不为空，提交地址为修改
						if (this.form.id) {
							url = '/gc/shenqing/update';
						}
						this.form.userId = this.userInfo.id;
						let res = await this.$http.post(url, param, header, 'json');

						if (res.code == 200) {
							this.showToast(res.msg, 'success');
							this.navigateTo({
								type: 'page',
								url: 'records'
							});
						} else {
							this.showModal(res.msg, '提示', false);
						}
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		onPullDownRefresh() {
			// 列表数据 API请求方法
			this.dataNum = 1;
			this.dataApi();

			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			// 列表数据 API请求方法
			this.dataApi();
		}
	};
</script>

<style lang="scss" scoped>
	.form_title_clz {
		background-color: #f6f6f6 !important;
		padding: 16rpx 20rpx !important;
		border-radius: 10rpx !important;
	}
	.form_gongsi_clz {
		background-color: #f6f6f6 !important;
		padding: 16rpx 20rpx !important;
		border-radius: 10rpx !important;
	}
	.form_shenqingshijian_clz {
		background-color: #f6f6f6 !important;
		padding: 16rpx 20rpx !important;
		border-radius: 10rpx !important;
	}
	.form_baifangren_clz {
		background-color: #f6f6f6 !important;
		padding: 16rpx 20rpx !important;
		border-radius: 10rpx !important;
	}
	.form_number_clz {
		background-color: #f6f6f6 !important;
		padding: 16rpx 20rpx !important;
		border-radius: 10rpx !important;
	}
	.form_remark_clz {
		background-color: #f6f6f6 !important;
		padding: 16rpx 20rpx !important;
		border-radius: 10rpx !important;
	}
	.flex-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.btn-clz {
		padding-top: 20rpx;
		border-bottom-left-radius: 120rpx;
		color: #fff;
		font-weight: bold;
		padding-left: 20rpx;
		font-size: 28rpx !important;
		padding-bottom: 20rpx;
		border-top-right-radius: 120rpx;
		margin-right: 10rpx;
		background-color: #ea3305;
		margin-left: 10rpx;
		overflow: hidden;
		width: calc(33.3333333333% - 10rpx - 10rpx) !important;
		border-top-left-radius: 120rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 120rpx;
		margin-bottom: 10rpx;
		text-align: center;
		padding-right: 30rpx;
	}
	.btn1-clz {
		padding-top: 20rpx;
		border-bottom-left-radius: 120rpx;
		color: #fff;
		font-weight: bold;
		padding-left: 20rpx;
		font-size: 28rpx !important;
		padding-bottom: 20rpx;
		border-top-right-radius: 120rpx;
		margin-right: 10rpx;
		background-color: #07c160;
		margin-left: 10rpx;
		overflow: hidden;
		flex: 1;
		border-top-left-radius: 120rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 120rpx;
		margin-bottom: 10rpx;
		text-align: center;
		padding-right: 20rpx;
	}
	.flex1-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 12rpx;
		bottom: 100rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		border-top-right-radius: 12rpx;
		right: 10rpx;
		background-color: #e7e7e7;
		overflow: hidden;
		width: 120rpx !important;
		border-top-left-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		padding-right: 10rpx;
	}
	.icon {
		font-size: 40rpx;
	}
	.container333526 {
	}
</style>
